<template>
  <div class="myheader">
    <mt-header class="header" title="个人资料">
      <router-link to="/my" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="body">
      <div>
        <p>头像</p>
        <div class="smaj">
          <img src="../assets/smaj.png" alt="">
        </div>
        <div class="avatar">
          <img :src="Avatar" alt="">
        </div>
      </div>
      <div @click="nick">
        <p>昵称</p>
        <div class="smaj">
          <img src="../assets/smaj.png" alt="">
        </div>
        <div class="text">
          <span>{{user[0].nickname}}</span>
        </div>
      </div>
      <div @click="indiv">
        <p>个性签名</p>
        <div class="smaj">
          <img src="../assets/smaj.png" alt="">
        </div>
        <div class="text color">
          <span>{{indi}}</span>
        </div>
      </div>
      <div @click="emailt">
        <p>邮箱</p>
        <div class="smaj">
          <img src="../assets/smaj.png" alt="">
        </div>
        <div class="text color">
          <span>{{email}}</span>
        </div>
      </div>
    </div>
    <!-- 退出登录 -->
    <mt-button class="btn" size="large" type="danger" @click="del">退出登录</mt-button>
  </div>
</template>
<script>
import {mapState,mapMutations} from "vuex"
export default {
  data(){
    return {
      Avatar:"",
      // nickname:"",
      indi:"",
      email:""
    }
  },
  computed:{
    ...mapState(["user","islogin"])
  },
  mounted(){
    if(this.islogin == 1){
      console.log(this.user)
      this.axios.get(`/bo_user/v1/search/:uid`,{
        params:{
          uid:this.user[0].uid
        }
      })
      .then(result=>{
        console.log(result.data)
        if(result.data[0].indi == null){
          this.indi = "未填写"
        }else{
          this.indi = result.data[0].indi
        }
        if(result.data[0].email == null){
          this.email = "未填写"
        }else{
          this.email = result.data[0].email
        }
        console.log(result.data[0].email)
        // this.$store.commit("setuser",result.data)
        // this.$store.commit("setislogin",1)
        this.Avatar = require(`../../public/avatar/${result.data[0].avatar}`)
      })
    }
  },
  methods:{
    ...mapMutations(["setuser","setislogin"]),
    nick(){
      this.$router.push("/nickname")
    },
    del(){
      this.$store.commit("setuser",null)
      this.$store.commit("setislogin",0)
      sessionStorage.setItem("user",null)
      sessionStorage.setItem("islogin",0)
      this.$router.push("/my")
    },
    indiv(){
      this.$router.push("/indi")
    },
    emailt(){
      this.$router.push("/email")
    }
  }
}
</script>
<style scoped>
.myheader > .header {
  background-color: #fff;
  color: #000;
}
.myheader > .body {
  font-size: 12px;
}
.myheader > .body > div {
  display: flex;
  margin-left: 20px;
  margin-top: 20px;
  line-height: 60px;
}
.myheader > .body > .avatar > img {
  width: 100%;
}
.myheader > .body > div > .avatar {
  width: 60px;height: 60px;
  border-radius: 50%;
  overflow: hidden;
  position: fixed;
  right: 40px;
}
.myheader > .body > div > .text {
  position: fixed;
  right: 60px;
}
.myheader > .body > div > .color {
  color: rgb(143, 140, 140);
}
.myheader > .body > div > .smaj {
  position: fixed;
  right: 20px;
}
.myheader > .btn {
  position: fixed;
  bottom: 50px; 
  width: 80%;
  margin-left: 37px;
}
.myheader span {
  display: inline-block;
  width: 50px;
  white-space: nowrap;
	text-overflow:ellipsis;
	overflow: hidden;
}
</style>